<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            width: 80px;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            overflow: hidden;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>测试分片上传</h1>
        <div><input type="file" id="file" @change="onFileChange"></input></div>
        <div><progress :value="per" max="100"></progress> {{per}}% {{state}}</div>
        <button :disabled="!hasSelectFile||state!='ready'" @click="onStart">开始上传</button>
        <button :disabled="state!='uploading'" @click="onPause">暂停</button>
        <button :disabled="state!='pause'" @click="onResume">继续</button>
        <button :disabled="!(state=='pause'||state=='uploading')" @click="onCancel">停止</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/vue.min-2.4.js"></script>
    <script src="./js/uploader.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>